<template>
  <div class="grid gap-6" :class="`grid-cols-1 md:grid-cols-${cardPerRow}`">
    <div v-for="i in count" :key="i" class="expert-card bg-white rounded-2xl shadow-md p-7 flex flex-col items-center relative border border-slate-100 animate-pulse">
      <div class="avatar-ring mb-2">
        <div class="w-[72px] h-[72px] rounded-full bg-slate-200"></div>
      </div>
      <div class="h-5 w-20 bg-slate-200 rounded mb-2"></div>
      <div class="h-4 w-24 bg-slate-100 rounded mb-1"></div>
      <div class="h-3 w-16 bg-slate-100 rounded mb-2"></div>
      <div class="flex flex-wrap gap-2 mt-3 justify-center">
        <div class="h-6 w-12 bg-slate-100 rounded" v-for="j in 2" :key="j"></div>
      </div>
      <div class="flex gap-2 mt-4 text-xs text-slate-500">
        <div class="h-3 w-12 bg-slate-100 rounded"></div>
        <div class="h-3 w-16 bg-slate-100 rounded"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  count: {
    type: Number,
    default: 6
  },
  cardPerRow: {
    type: Number,
    default: 3
  }
})
</script>
<style scoped>
.animate-pulse {
  animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
</style> 